<!--
 * @Author: your name
 * @Date: 2021-04-09 11:30:32
 * @LastEditTime: 2021-04-09 16:13:04
 * @LastEditors: Please set LastEditors
 * @Description: 条形图5
 * @FilePath: /medicine-web/src/components/Charts/BarChart5.vue
-->
<template>
  <div class="bar-chart2-container">
    <div :id="elementId" style="height: 375px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'barChart5',
  data () {
    return {}
  },
  mounted () {
    var myChart = echarts.init(document.getElementById(this.elementId))
    myChart.setOption({
      title: {
        text: this.chartTitle,
        textStyle: {
          color: '#555555',
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      grid: [
        {
          left: '20%',
          right: '5%',
          top: '10%',
          width: '70%',
          height: '40%'
        },
        {
          left: '20%',
          right: '5%',
          top: '50%',
          width: '70%',
          height: '25%'
        },
        {
          left: '20%',
          right: '5%',
          top: '77%',
          width: '70%',
          height: '8%'
        }
      ],
      xAxis: [
        {
          gridIndex: 0,
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E4E4E4',
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        {
          gridIndex: 1,
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E4E4E4',
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        {
          gridIndex: 2,
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          gridIndex: 0,
          type: 'category',
          name: '腺病毒',
          nameLocation: 'middle',
          nameGap: 70,
          data: ['H101、H103', 'KH901', 'ADV-TK', 'EDS01', 'E10A'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          gridIndex: 1,
          type: 'category',
          name: '单纯疱疹病毒',
          nameGap: 70,
          nameLocation: 'middle',
          data: ['T3011', 'OH2', 'OrienX010'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          gridIndex: 2,
          type: 'category',
          name: '牛痘病毒',
          nameLocation: 'middle',
          nameGap: 70,
          data: ['TG6002'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          xAxisIndex: 0,
          yAxisIndex: 0,
          name: '机制/文献类型',
          type: 'bar',
          data: [49099, 37098, 14870, 37098, 37098],
          label: {
            show: true,
            position: 'right',
            color: '#AFAFAF'
          },
          itemStyle: {
            color: '#8DC8FF'
          }
        },
        {
          xAxisIndex: 1,
          yAxisIndex: 1,
          name: '机制/文献类型',
          type: 'bar',
          data: [40988, 9880, 9880],
          label: {
            show: true,
            position: 'right',
            color: '#AFAFAF'
          },
          itemStyle: {
            color: '#98E1AE'
          }
        },
        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: '机制/文献类型',
          type: 'bar',
          data: [9880],
          label: {
            show: true,
            position: 'right',
            color: '#AFAFAF'
          },
          itemStyle: {
            color: '#FCF3B0'
          }
        }
      ]
    })
  },
  methods: {
    getData () {
      return this.chartData.map(item => item.data)
    },
    getYAxisList () {
      const type = Array.from(new Set(this.chartData.map(item => item.type)))
      console.log('type', type)
      let yAxis = []
      for (const item of type) {
        yAxis.push({
          type: 'category',
          data: this.getYAxis(item),
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        })
      }
      return yAxis
    },
    getYAxis (type) {
      return this.chartData.filter(item => item.type == type).map(item => item.name)
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.bar-chart2-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>
